<template>
	<view>
		<c-status-bar></c-status-bar>
		<c-page-header title="资料完善" :can-back="true"></c-page-header>

<!-- value="imgLists" -->
		<!-- 头像 -->
		<view class="avatar flex align-center justify-center">
			<uni-file-picker 
			
			v-model="avatar" return-type="object" limit="1" mode="grid" file-mediatype="image"
				:image-styles="avatarStyles" @success="onAvatarUploadSuccess" @fail="onAvatarUploadFail"
				@delete="onAvatarUploadDelete">

				<view class="avatarSeat input-bg-color flex align-center justify-center">头像</view>
			</uni-file-picker>
		</view>

		<!-- 表单域 -->
		<uni-forms ref="forms" class="px-2 mt-3" :value="forms">
			<!-- 			<uni-forms-item name="username">
				<uni-easyinput :input-border="false" placeholder="账号" class="input-bg-color py-2 rounded"
					v-model="forms.username" />
			</uni-forms-item> -->

			<!-- <uni-forms-item name="password">
				<uni-easyinput :input-border="false" placeholder="密码" type="password" class="input-bg-color py-2 rounded" v-model="forms.password" />
			</uni-forms-item>
		
			<uni-forms-item class="mt-3" name="gender" label="性别" label-align="center">
		
				<uni-data-checkbox v-model="forms.gender" :localdata="genderRange" mode="button" selected-color="#ff584f" />
			</uni-forms-item> -->

			<uni-forms-item required name="realName">
				<uni-easyinput :input-border="false" placeholder="姓名" class="input-bg-color py-2 rounded"
					v-model="forms.realName" />
			</uni-forms-item>

			<uni-forms-item name="school">
				<uni-easyinput :input-border="false" placeholder="毕业学校" class="input-bg-color py-2 rounded"
					v-model="forms.school" />
			</uni-forms-item>

			<uni-forms-item class="mt-3" name="graduate" label="学历:" label-align="center">

				<uni-data-checkbox v-model="forms.graduate" :localdata="graduateRange" mode="button"
					selected-color="#ff584f" />
			</uni-forms-item>


			<!-- 头像 -->
			<!-- <view class="avatar flex align-center justify-center">
				<uni-file-picker v-model="school" return-type="object" limit="1" mode="grid" file-mediatype="image"
					:image-styles="avatarStyles" @success="onAvatarUploadSuccess" @fail="onAvatarUploadFail"
					@delete="onAvatarUploadDelete">
			
					<view class="avatarSeat input-bg-color flex align-center justify-center">头像</view>
				</uni-file-picker>
			</view> -->

			<uni-forms-item name="birth" label="出生日期:">
				<uni-datetime-picker timestamp v-model="forms.birth"></uni-datetime-picker>
			</uni-forms-item>


			<uni-forms-item name="myHome">
				<uni-easyinput :input-border="false" placeholder="家乡" class="input-bg-color py-2 rounded"
					v-model="forms.myHome" />
			</uni-forms-item>

			<uni-forms-item name="hobby">
				<uni-easyinput :input-border="false" placeholder="爱好" class="input-bg-color py-2 rounded"
					v-model="forms.hobby" />
			</uni-forms-item>

			<!-- 			<uni-forms-item name="friendDetail">
				<uni-easyinput :input-border="false" placeholder="爱好" class="input-bg-color py-2 rounded"
					v-model="forms.friendDetail" />
			</uni-forms-item> -->
		</uni-forms>

		<view class="px-2">

			<view class="uni-title uni-common-pl">交友宣言:</view>
			<!-- 	<view class="uni-textarea" style="background-color: aliceblue;">
				<textarea @blur="bindTextAreaBlur" auto-height />
			</view> -->
			<view class="uni-textarea" style="background-color:#f3f4f6;">
				<textarea placeholder-style="color:#F76260" v-model="forms.friendDetail" :placeholder="isPlaceholder" />
			</view>
		</view>
		<!-- <view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
		<view class="uni-textarea">
			<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
		</view> -->

		<c-button class="m-3 main-bg-color text-white" @on-tap="onSubmit" :disabled="isDisable">提交</c-button>

	</view>
</template>

<script>
	export default {
		computed: {
			isDisable() {
				return this.forms.realName ? false : true
			},
			isPlaceholder(){
				return this.forms.friendDetail?this.forms.friendDetail:'just do it!'
			}

		},
		onLoad() {
			// console.log(this.forms.graduate,"dagi")
			const {
				uid
			} = uniCloud.getCurrentUserInfo()

			this.uid = uid

			const db = uniCloud.database()
			// const $ = db.command
			const posts = db.collection("uni-id-users")
			
			// .field("_id,realName,birth,school,friendDetail,myHome,hobby,graduate,avatar").getTemp()

			posts.where({
				_id: uid
			}).get().then(res=>{
				// console.log(res)
			  let  {
				realName,
				birth,
				school,
				friendDetail,
				myHome,
				hobby,
				graduate,
				
				avatar
				
			} =res.result.data[0]
			
			  this.forms.realName = realName
			  this.forms.birth = birth
			  this.forms.school = school
			  this.forms.friendDetail = friendDetail
			  this.forms.myHome = myHome
			  this.forms.hobby = hobby
			  this.forms.graduate = graduate
			  
			  this.disabled = false
			  this.avatar = avatar
			  this.imgLists[0].url = avatar
			  // console.log(this.imgLists,"hhh")
			})

			// const {
			// 	realName,
			// 	birth,
			// 	school,
			// 	friendDetail,
			// 	myHome,
			// 	hobby,
			// 	graduate,
				
			// 	avatar
				
			// } = res.data[0]
			// console.log(res.data)
			// this.forms={
			// 		graduate,
			// 		realName,
			// 		birth,
			// 		school,
			// 		friendDetail,
			// 		myHome,
			// 		hobby
			// }
			// console.log(this.forms,"hhh")
			// this.avatar = avatar
			
		},
		data() {

			return {				
				// imgLists: [{
				//     url: null,  
				//     extname: 'png',  
				//     name: 'shuijiao.png'  
				// }] ,
							
				uid: this.uid,
				disabled: true,
				avatar: null,
				avatarStyles: {
					height: 120,
					width: 120,
					border: {
						width: "1px",
						style: "solid",
						radius: "8px"
					}
				},
				forms: {
					// username: "",
					// password: "",
					graduate: 0,
					realName: "",
					birth: '',
					school: "",
					friendDetail: "",
					myHome: "",
					hobby: ""
				},
				graduateRange: [{
						value: 0,
						text: "本科"
					},
					{
						value: 1,
						text: "硕士"
					},
					{
						value: 2,
						text: "博士"
					},
				],
				/* rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入{label}',
						}, {
							minLength: 2,
							maxLength: 10,
							errorMessage: '{label}长度{minLength}到{maxLength}',
						}],
						label: "账号"
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入{label}',
						}, {
							minLength: 8,
							maxLength: 16,
							errorMessage: '{label}长度在{minLength}到{maxLength}',
						}, {
							pattern: /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$/,
							errorMessage: "{label}必须包含大小写字母"
						}],
						label: "密码"
					}
				}, */
			}
		},
		methods: {
			onAvatarUploadSuccess() {
				this.disabled = false
			},
			onAvatarUploadFail() {
				this.disabled = true
			},
			onAvatarUploadDelete() {
				this.disabled = true
			},

			async onSubmit() {
				// console.log(this.forms, this.avatar)

				try {
					this.$U.loading()
					// const forms = await this.$refs.forms.validate()

					const {
						result
					} = await this.$A.user.updateInfo({
						...this.forms,
						uid: this.uid,
						avatar: this.avatar.url,

					})

					// this.$U.refreshUser(result)

					this.$U.notice('提交成功')


					uni.navigateTo({
						url: "/pages/tabbar/myself/myself"
					})
					// this.toHomePage()
				} catch (e) {
					this.$U.notice(e.message || '校验失败')
				} finally {
					this.$U.hideLoading()
				}

			}


		}
	}
</script>

<style scoped>
	.avatar {
		width: 100%;
		height: 25vh;
	}

	.avatarSeat {
		width: 100%;
		height: 100%;
	}
</style>